<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document123456</title>
    <script src="./vue.js"></script>
    <script type="text/javascript"></script>
</head>
<body>
    <div id="app" styple="margin:0 auto;width:1000px;height:610px;border:1px solid #ofofof">
        <h2 style="text-align: center">填写个人信息11</h2>
        <div style="width: 500px;float: left">
        <div style="margin-left: 30px;">
            <form>
                姓名：<input type="text" name="user" v-model="user"><br><br>
                <fieldse style="margin-right: 30PX;">
                    <legend>健康信息</legend>
                    身高：<input type="text" v-model="height">
                    <br>
                    体重：<input type="text" v-model="weight">

                </fieldset><br>
                性别：
                <input type="radio" value="男" v-model="sex">
                <label >男</label>
                <input type="radio" value="女" v-model="sex">
                <label >女</label><br><br>
                喜爱的运动：<br><br>
                <input type="checkbox" value="篮球" v-model="checkedNames">
                <label >篮球</label>
                <input type="checkbox" value="足球" v-model="checkedNames">
                <label >足球</label>
                <input type="checkbox" value="羽毛球" v-model="checkedNames">
                <label >羽毛球</label>
                <input type="checkbox" value="跑步" v-model="checkedNames">
                <label >跑步</label><br><br>
                <label >地址：</label>
                <select name="" id="" v-model="address">
                    <option v-for="(item,index) in citys" v-bind:value="item">
                        {{item}}
                    </option>
                </select><br><br>
                个人简介：<br>
                <textarea v-model="profile" cols="50" rows="6">
                    填写信息
                </textarea><br><br>
                <div style="text-align: center">
                <input type="submit" value="提交">
                <input type="reset" value="重置">
                </div>
            </form>
        </div>
    </div>
    <div style="width: 500px;float:right">
    <div style="margin-left: 30px">
    姓名：{{user}} <br><br><br>
    身高：{{height}} <br>
    体重：{{weight}} <br><br>
    性别：{{sex}} <br><br>
    喜爱的运动：{{checkedNames}} <br><br><br><br>
    地址：{{address}} <br>
    个人简介：{{profile}} 
    </div>
    </div>
    </div>
    <script src="./vue.js"></script>
<script type="text/javascript">
var vm=new Vue({
el:'#app',
data:{
    user:'',
    height:'',
    weight:'',
    sex:'',
    checkedNames:[],
    
    profile:'',
    citys:["北京" ,"上海","广州","深圳"]
    
}
})

</script>
</body>
</html>